<template>
  <el-row>
    <el-col :span="12">
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        :rules="rules"
        class="demo-ruleForm"
      >
        <el-form-item label="路径" prop="path">
          <el-input v-model="form.path"></el-input>
        </el-form-item>
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动" prop="label">
          <el-input v-model="form.label"></el-input>
        </el-form-item>
        <el-form-item label="活动--" prop="children">
          <el-input v-model="form.children"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="form.icon"></el-input>
        </el-form-item>
        <el-form-item label="url" prop="url">
          <el-input v-model="form.url"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">
            立即创建
          </el-button>
          <el-button @click="resetForm('form')">取消</el-button>
          <el-button @click="add">提交</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
import axios from "axios";
// import axios from "axios";
import { mapMutations } from "vuex";
export default {
  components: {},
  props: {},
  data() {
    return {
      form: {
        path: "",
        name: "",
        label: "",
        icon: "",
        url: "",
        children:''
      },
      rules: {
        path: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        name: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
        label: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
        icon: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    ...mapMutations("home", ["postList"]),
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
          this.$store.dispatch("home/submitList", { ...this.form });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      //   this.postList({ ...this.form });

      //   await axios.post("http://localhost:3000/getList/posts", {
      //     path: this.form.path,
      //     name: this.form.name,
      //     label: this.form.label,
      //     icon: this.form.icon,
      //     url: this.form.url,
      //   });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    async add() {
      const res = await axios.post("http://localhost:3000/baseList", {
        path: "/hhh",
        name: "page654",
        label: "ttt",
        icon: "s-tools",
        url: "gfgfgf",
      });

      console.log(res, "0099987");
    },
  },
  watch: {},
};
</script>
<style scoped lang='less'>
</style>
